<template>
    <div class="page-group">
        <div class="page page-current">
            <header class="bar bar-nav">
                <button class="button button-link button-nav  pull-left" @click="back">
                    <span class="icon  icon-chevron-left"></span>
                    返回
                </button>
                <h1 class="title">单位选择</h1>
                <button class="button button-link button-nav pull-right" @click="choose">
                    确定
                </button>
            </header>
            <div class="content">
                <div class="content-block">
                    <div class="list-block">
                        <ul id="chooseNode">
                            <li v-for="item in itemList" class="item-content">
                                <label class="label-checkbox item-content" style="width:100%">
                                    <input type="radio" name="unitName" v-model="unitName" :value="item">
                                    <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                                    <div class="item-inner">
                                        <div style="margin:auto">{{item.value}}</div>
                                    </div>
                                </label>

                                <div :style="{ display:item.clickEnter?'inherit':'none'}"
                                     class="item-media button"
                                     style="float:right" @click="enter($index)">
                                    下一级 <i class="icon icon-hand-right"></i>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .item-center {
        text-align: center;
    }
</style>
<script>
    import {unit,mock} from '../url-config'
    import {fAjax} from '../util/FAjax'
    import * as FStorage from '../util/FStorage'

    function search(tree, name, layerIndex, callback) {
        if (tree.name == name) {
            for (var i = 0; i < tree.children.length; i++) {
                var value = tree.children[i].name;
                callback({
                    clickEnter: tree.children[i].children != undefined,
                    value: value,
                    supper: name,
                    children: tree.children[i].children,
                    layer: layerIndex + 1
                });
            }
        } else if (tree.children != undefined) {
            for (var i = 0; i < tree.children.length; i++) {
                search(tree.children[i], name, layerIndex + 1, callback);
            }
        }
    }
    export default{
        compiled(){
            var Mock = require('mockjs');
            Mock.mock(/mock\/unit/, unitMockData());
            var url = mock() ? unit.mock : unit.server;
            var ctx = this;
            var unitTree = FStorage.getSesstionItem('unitTree')
            if (!unitTree) {
                fAjax(url, 'get', {}, function (data) {
                    var object;
                    eval('object = ' + data)
                    ctx.tree = object;
                    ctx.dealRoot()
                    FStorage.setSesstionItem('unitTree', object)

                })
            } else {
                this.tree = unitTree
            }
            ctx.dealRoot()
        },
        data(){
            return {
                tree: {},
                unitName: undefined
            }
        },
        computed: {
            itemList() {
                var list = [];
                var currentRoot = this.$route.params.currentNode
                currentRoot = currentRoot == ':currentNode' ? this.tree.name : currentRoot
                if (currentRoot)
                    search(this.tree, currentRoot, 0, function (item) {
                        list.push(item);
                    });
                return list;
            }
        },
        methods: {
            back(){
                window.history.back();
            },
            changeRoot(param){
                this.currentRoot = param;
            },
            dealRoot(){
                var ctx = this;
                var needRoot = this.$route.params.needRoot;
                if (needRoot == 'true') {
                    this.tree = {
                        name: 'supper',
                        level: 0,
                        children: [ctx.tree]
                    }
                }
            },
            enter(index){
                var ctx = this;
                var params = {
                    storageName: ctx.$route.params.storageName,
                    currentNode: ctx.itemList[index].value
                }
                this.$router.go({
                    name: 'unitChoose',
                    params: params
                });
            },
            choose(){
                var storageName = this.$route.params.storageName;
                if (this.unitName) {
                    FStorage.setLocalItem(storageName, this.unitName);
                }
                window.history.go(-this.unitName.layer)
            }
        },
        getParams(unit){
            var params = {}
            if (unit.layer == 1) {
                Object.assign(params, {adminUnit2: unit.value})
            }
            if (unit.layer == 2) {
                Object.assign(params, {adminUnit2: unit.supper, adminUnit3: unit.value})
            }
            return params;
        }
    }


    function unitMockData() {
        return {
            name: 'rootNode',
            level: 1, children: [{
                name: 'level_1_list1',
                level: 2,
                children: [{name: 'level_2_list1', level: 3}, {name: 'level_2_list2', level: 3}, {
                    name: 'level_2_list3',
                    level: 3
                }]
            }, {
                name: 'level_1_list2',
                level: 2,
                children: [{name: 'level_2_list1', level: 3}, {name: 'level_2_list2', level: 3}, {
                    name: 'level_2_list3',
                    level: 3
                }]
            }, {
                name: 'level_1_list3',
                level: 2,
                children: [{name: 'level_2_list1', level: 3}, {name: 'level_2_list2', level: 3}, {
                    name: 'level_2_list3',
                    level: 3
                }]
            }, {
                name: 'level_1_list4',
                level: 2,
                children: [{name: 'level_2_list1', level: 3}, {name: 'level_2_list2', level: 3}, {
                    name: 'level_2_list3',
                    level: 3
                }]
            },]
        }
    }
</script>
